<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件定义</title>
</head>
<body>
<div id="root">
</div>
</body>
<script src="js/old/babel.min.js"></script>
<script src="js/old/react.development.js"></script>
<script src="js/old/react-dom.development.js"></script>
<script type="text/babel">
  // 组件定义 函数组件, 类组件
  class Welcome extends React.Component {
    // ref 字符串, 回调, 容器
    h2 = {current: ''}
      // React.createRef() // 新建容器, 保持容器

    constructor(props) {
      // props
      super(props)
      console.log(this, this.props)

      // bind this
      this.handleClick = this.handleClick.bind(this)

      // state
      this.state = {
        value: 0
      }
    }
    
    handleClick() {
      console.log(this, 'handleClick', this.h2)
    }
    
    render() {
      console.log(this)
      return (
        // <h2 ref={c => this.elem = c} onClick={this.handleClick}>Welcome Component</h2>
        <h2 ref={this.h2} onClick={this.handleClick}>Welcome Component</h2>
      )
    }
  }

  const About = (props) => {
    console.log(this, 'undefined', props)

    const h2 = React.useRef()
    const [value, setValue] = React.useState(0)

    const handleClick = e => {
      console.log(e, 'handleClick', value, h2)
      // 状态更新细节, 纯函数, 异步队列式, 复杂情况最好使用回调方式更新
      setValue(pre => pre + 1)
    }

    return (
      <h2 ref={h2} onClick={handleClick}>About {value} Component</h2>
    )
  }

  ReactDOM.render((
    <div>
      <Welcome a={1} b={2}/>
      <About/>
    </div>
  ), document.getElementById('root'))
</script>
</html>